
<div id="collaboratorModal" class="modal fade" role="dialog">
  <div class="modal-dialog primary-modal-dialog">
    <div class="modal-content">
      <div class="modal-header primary-modal-header">
        <h4 class="modal-title"><%= t("add_members") %></h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
      </div>
      <div class="modal-body">
        <p><%= t("projects.add_collaborator_description") %></p>
        <%= form_with(model: @collaboration, local: true) do |form| %>
        <% if @collaboration.errors.any? %>
          <div class="error-message">
            <ul>
            <% @collaborator.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
            </ul>
          </div>
        <% end %>
        <div class="field">
          <%= form.hidden_field :project_id, id: :collaboration_project_id %>
        </div>
        <div class="mb-3 d-flex flex-column">
          <%= form.label :emails %>
          <%= form.select :emails, [], {}, { class: "form-select", multiple: true } %>
        </div>
        <div class="modal-footer">
          <%= form.submit class: "btn primary-button add-collaborators-button" %>
        </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(() => {
  $('#collaboration_emails').select2({
    tags: true,
    multiple: true,
    tokenSeparators: [',', ' '],
  });

  $('.select2-selection input').attr('maxlength', '30'); // to limit the no. of chars entered in input box to avoid the overflow
  $('.select2-selection input').attr('id', 'project_email_input_collaborator');
  $('.add-collaborators-button').attr('disabled', true); // setting submit button to disabled initially

  $('.select2-container').on('keyup', () => {
    if($('.select2-selection__rendered').children().length > 1) { // checking for 1 because there is already a child (input tag)
      $('.add-collaborators-button').attr('disabled', false);
    } else {
      $('.add-collaborators-button').attr('disabled', true);
    }
  });

  $('.select2-selection input').on('click', () => { //checking for 1 because there is already a child (input tag)
  if($('.select2-selection__rendered').children().length > 1) {
      $('.add-collaborators-button').attr('disabled', false);
    } else {
      $('.add-collaborators-button').attr('disabled', true);
    }
  })

  document.querySelector('.select2-selection input').addEventListener('paste', (e) => { // listening for paste event
    e.preventDefault();
    let pastedEmails = '';
    if (window.clipboardData && window.clipboardData.getData) { // IE
      pastedEmails = window.clipboardData.getData('Text');
    } else if (e.clipboardData && e.clipboardData.getData) { // other browsers
      pastedEmails = e.clipboardData.getData('text/plain');
    }

    if(pastedEmails.includes('\n')) {
      const newLinesIntoSpaces = pastedEmails.replace(/\n/g, ' '); // converting new lines in to spaces
      const newLinesIntoSpacesSplitted = newLinesIntoSpaces.split(' '); // splitting emails by space
      this.value = pastedEmails.replace(/./g, ''); // removing the pasted values from input box
      newLinesIntoSpacesSplitted.forEach(value => {
        var tags = $("<option/>", { text: value });
        $('#collaboration_emails').append(tags);
        $('#collaboration_emails option').prop('selected',true);
      }); // adding each value as an input
      $('.add-collaborators-button').attr('disabled', false)
    } else {
      const pastedEmailsSplittedBySpace = pastedEmails.split(' '); // splitting emails by space
      this.value = pastedEmails.replace(/./g, ''); // removing the pasted values from input box
      pastedEmailsSplittedBySpace.forEach(value => {
        var tags = $("<option/>", { text: value });
        $('#collaboration_emails').append(tags);
        $('#collaboration_emails option').prop('selected',true);
      }); // adding each value as an input
      $('.add-collaborators-button').attr('disabled', false)
    }
  });
});

</script>
